<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Thymeleaf - Hello World</title>
    <link rel="stylesheet" th:href="@{/css/base.css}" />
    <link rel="stylesheet" th:href="@{/css/home.css}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
</head>
<body>

<header class="site-header">
    <div class="header-content">
        <h1 class="site-title">Thymeleaf 示例主页</h1>
        <div class="login-controls">
            <div th:if="${user != null}">
                <span class="login-status" th:text="'欢迎，' + ${user.username} + '！'"></span>
                <a th:href="@{/user-info}" class="user-info-button">
                    <i class="fas fa-user"></i> 用户信息
                </a>
                <a th:href="@{/user/logout}" class="logout-button">
                    <i class="fas fa-sign-out-alt"></i> 注销
                </a>
            </div>
            <div th:if="${user == null}">
                <a th:href="@{/user/login}" class="user-info-button">
                    <i class="fas fa-sign-in-alt"></i> 登录
                </a>
                <a th:href="@{/jsp/register.jsp}" class="register-button">
                    <i class="fas fa-user-plus"></i> 注册
                </a>
            </div>
        </div>
    </div>
</header>

<main class="main-content">
    <section class="welcome-section">
        <h2>Hello World!</h2>
        <p>欢迎使用 Thymeleaf 模板引擎构建网页。</p>
    </section>

    <section class="nav-section">
        <h3>功能导航</h3>
        <ul class="nav-links">
            <li><a th:href="@{/hello-servlet}">Hello Servlet</a></li>
            <li><a th:href="@{/first}">Servlet 间信息传递</a></li>
            <li><a th:href="@{/redirect}">Servlet 重定向</a></li>
            <li><a th:href="@{/collection}">展示集合数据</a></li>
            <li><a th:href="@{/user-map}">展示 JavaBean 集合</a></li>
            <li><a th:href="@{/setData}">向域中添加数据</a></li>
            <li><a th:href="@{/jsp/showData.jsp}">JSP 添加数据</a></li>
            <li><a th:href="@{/jsp/shop.jsp}">三层架构购物示例</a></li>
        </ul>
    </section>

    <section class="form-section">
        <h3>提交信息</h3>
        <div class="form-container">
            <form th:action="@{/submit}" method="post">
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name1" required />

                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email" required />

                <button type="submit">提交</button>
            </form>
        </div>
    </section>
</main>

<footer class="site-footer">
    <p>&copy; 2025 Thymeleaf Example. All rights reserved.</p>
</footer>

<div class="online-count-widget">
    当前在线人数：<span th:text="${onlineCount}">0</span>
</div>

</body>
</html>
